<template>
  <el-card class="sales-proportion content-card">
    <template #header>
      <span>销售额类别占比</span>
      <div class="card-header-extra">
        <el-radio-group v-model="type" size="default" @change="change">
          <el-radio-button value="all">全部</el-radio-button>
          <el-radio-button value="online">线上</el-radio-button>
          <el-radio-button value="store">门店</el-radio-button>
        </el-radio-group>
        <el-dropdown class="card-header-extra-action">
          <span class="title-tip-icon">
            <SvgIcon icon="more-line"/>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>操作一</el-dropdown-item>
              <el-dropdown-item>操作二</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </template>
    <div style="margin-bottom: 12px">销售额</div>
    <VChart :loading="loading" :option="option" autoresize class="echarts"/>
  </el-card>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import VChart from 'vue-echarts';
import useLoading from '@/hooks/use-loading';
import { SalesProportionData, } from '@/api/dashboard';
import { SvgIcon } from '@/components/icon';

const optionData = ref<SalesProportionData[]>([]);
const type = ref('all');
const option = computed(() => {
  return {
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        data: optionData.value,
        radius: ['40%', '90%'],
        type: 'pie',
        avoidLabelOverlap: false, // 是否启用防止标签重叠策略，默认开启，
        emphasis: {
          disabled: true, // 关闭高亮状态可以在鼠标移到图形上，tooltip 触发，或者图例联动的时候不再触发高亮效果
        },
        top: '12px',
        bottom: '12px',
      },
    ],
  };
});
const [loading, setLoading] = useLoading(true);

const fetchData = async () => {
  setLoading(true);
  try {
    let data: SalesProportionData[] = [];
    if (type.value === 'online') {
      data = salesProportionOnlineData;
    } else if (type.value === 'store') {
      data = salesProportionStoreData;
    } else {
      data = salesProportionAllData;
    }
    optionData.value = data;

    // const {data} = await getSalesProportionData(<SalesProportionParam>{
    //   type: type.value,
    // });
    // optionData.value = data;
  } catch (err) {
  } finally {
    setLoading(false);
  }
};

const salesProportionAllData: SalesProportionData[] = [
  {
    name: '家用电器',
    value: 4544,
  },
  {
    name: '食用酒水',
    value: 2121,
  },
  {
    name: '个护健康',
    value: 3131,
  },
  {
    name: '服饰箱包',
    value: 2323,
  },
  {
    name: '母婴产品',
    value: 1212,
  },
  {
    name: '其他',
    value: 1261,
  },
];

const salesProportionOnlineData: SalesProportionData[] = [
  {
    name: '家用电器',
    value: 234,
  },
  {
    name: '食用酒水',
    value: 321,
  },
  {
    name: '个护健康',
    value: 111,
  },
  {
    name: '服饰箱包',
    value: 98,
  },
  {
    name: '母婴产品',
    value: 111,
  },
  {
    name: '其他',
    value: 131,
  },
];

const salesProportionStoreData: SalesProportionData[] = [
  {
    name: '家用电器',
    value: 69,
  },
  {
    name: '食用酒水',
    value: 179,
  },
  {
    name: '个护健康',
    value: 284,
  },
  {
    name: '服饰箱包',
    value: 165,
  },
  {
    name: '其他',
    value: 99,
  },
];

fetchData();

const change = () => {
  fetchData();
};
</script>

<style lang="scss" scoped>
.sales-proportion {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.el-card__header) {
    line-height: 32px;
  }

  :deep(.el-card__body) {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .echarts {
      min-height: 340px;
      flex: 1;
    }
  }
}
</style>
